import styles from "./index.module.scss";
import { Tabs, Popup } from "antd-mobile";
import useInitialState from "@/utils/use-initial-state";
import { changeActive, getUserChannel } from "@/store/actions/home";
import Icon from "@/components/Icon";
import Channels from "./components/Channels";
import { useState } from "react";
import { useDispatch } from "react-redux";
import ArticleList from "./components/ArticleList";
import { useHistory } from "react-router-dom";
export default function HomeIndex() {
  const history = useHistory();
  const dispatch = useDispatch();
  const { userChannels, active } = useInitialState(getUserChannel, "home");
  // 频道显示隐藏
  const [visible, setVisible] = useState(false);
  const show = () => {
    setVisible(true);
  };
  const hide = () => {
    setVisible(false);
  };

  //切换频道
  const changeChannel = (key: string) => {
    console.log(key);
    dispatch(changeActive(+key));
  };
  return (
    <div className={styles.root}>
      {/* 频道 Tabs 列表 */}
      <div className="mytabs">
        <Tabs activeKey={active + ""} onChange={changeChannel} activeLineMode="fixed">
          {userChannels.map((item) => {
            return <Tabs.Tab title={item.name} key={item.id}></Tabs.Tab>;
          })}
        </Tabs>
        <div className="tabs-opration">
          <Icon className="icon" type="icon-sousuo1" onClick={() => history.push("/search")} />
          <Icon className="icon" type="icon-a-dianshitaidianshipindao" onClick={show} />
        </div>
      </div>
      <ArticleList channelId={active}></ArticleList>

      <Popup position="left" visible={visible}>
        <Channels hide={hide}></Channels>
      </Popup>
    </div>
  );
}
